/**
 * @Description: 全局使用的水印组件
 * @Author: shanansun
 * @Date:  20200428
 */
import React from 'react';
import moment from 'moment';
// import { watermark } from 'watermark-component';
import { watermark } from './src';

export default class WaterMarkComponentAp extends React.Component {
  static defaultProps = {
    watermarkConfig: {},
    getFuntion: () => {},
  };
  drawWaterMark() {
    const nowTime = new Date();
    const config = {
      text: this.props.watermarkConfig.content
        ? this.props.watermarkConfig.content
            .replace('${USERCODE}', this.props.userInfo)
            .replace('${CURTIME}', moment(nowTime).format('YYYY-MM-DD HH:mm'))
        : '',
      singleWidth: this.props.watermarkConfig.width ? this.props.watermarkConfig.width : 500,
      singleHeight: this.props.watermarkConfig.height ? this.props.watermarkConfig.height : 500,
      slope: 0 - this.props.watermarkConfig.rotate,
      fontColor: this.props.watermarkConfig.colorCode,
      fontSize: this.props.watermarkConfig.fontSize,
      transparency: this.props.watermarkConfig.alpha / 100,
      parentSelector: this.props.watermarkConfig.parentSelector
        ? '#' + this.props.watermarkConfig.parentSelector
        : '#applicationwatermarkId',
      id: this.props.watermarkConfig.id ? this.props.watermarkConfig.id : 'wm_divAp_id',
    };
    document.querySelector('#' + config.id) && document.querySelector('#' + config.id).remove();

    this.props.watermarkConfig.content ? watermark(config) : null;
  }
  componentDidMount() {
    this.drawWaterMark();
    this.props.getFuntion(this.drawWaterMark);
  }
  render() {
    return (
      <div id={this.props.watermarkConfig.parentSelector || 'applicationwatermarkId'}>
        {this.props.children}
      </div>
    );
  }
}

// import WaterMarkNode from 'watermark-component-for-react';
// export default class WaterMarkComponent extends React.Component {
//   static defaultProps = {
//     watermarkConfig: {},
//   };
//   render() {
//     return (
//       <WaterMarkNode
//         {...{
//           content: this.props.watermarkConfig.content,
//           width: this.props.watermarkConfig.width,
//           height: this.props.watermarkConfig.height,
//           rotate: this.props.watermarkConfig.rotate,
//           font: this.props.watermarkConfig.fontSize + 'px Microsoft Yahei',
//           fillStyle: this.props.watermarkConfig.colorCode,
//           globalAlpha: this.props.watermarkConfig.alpha / 100,
//         }
//       }
//       >
//         {this.props.children}
//       </WaterMarkNode>
//     );
//   }
// }

// import watermark from 'watermark-dom';

// export default class WaterMarkComponent extends React.Component {
//   static defaultProps = {
//     watermarkConfig: {},
//   };
//   componentDidMount() {
//     watermark.init({
//       watermark_txt: this.props.watermarkConfig.content, //水印的内容
//       watermark_x: 20, //水印起始位置x轴坐标
//       watermark_y: 20, //水印起始位置Y轴坐标
//       watermark_rows: 1, //水印行数
//       watermark_cols: 1, //水印列数
//       watermark_x_space: 100, //水印x轴间隔
//       watermark_y_space: 50, //水印y轴间隔
//       watermark_font: '微软雅黑', //水印字体
//       watermark_color: this.props.watermarkConfig.colorCode, //水印字体颜色
//       watermark_fontsize: this.props.watermarkConfig.fontSize + 'px', //水印字体大小
//       watermark_alpha: this.props.watermarkConfig.alpha / 100, //水印透明度，要求设置在大于等于0.005
//       watermark_width: this.props.watermarkConfig.width, //水印宽度
//       watermark_height: this.props.watermarkConfig.height, //水印长度
//       watermark_angle: this.props.watermarkConfig.rotate, //水印倾斜度数
//       watermark_parent_node: 'watermarkId', //水印插件挂载的父元素element,不输入则默认挂在body上
//     });
//     document.addEventListener('resize',()=>watermark.resize({
//       watermark_txt: this.props.watermarkConfig.content, //水印的内容
//       watermark_x: 20, //水印起始位置x轴坐标
//       watermark_y: 20, //水印起始位置Y轴坐标
//       watermark_rows: 1, //水印行数
//       watermark_cols: 1, //水印列数
//       watermark_x_space: 100, //水印x轴间隔
//       watermark_y_space: 50, //水印y轴间隔
//       watermark_font: '微软雅黑', //水印字体
//       watermark_color: this.props.watermarkConfig.colorCode, //水印字体颜色
//       watermark_fontsize: this.props.watermarkConfig.fontSize + 'px', //水印字体大小
//       watermark_alpha: this.props.watermarkConfig.alpha / 100, //水印透明度，要求设置在大于等于0.005
//       watermark_width: this.props.watermarkConfig.width, // 水印宽度
//       watermark_height: this.props.watermarkConfig.height, //水印长度
//       watermark_angle: this.props.watermarkConfig.rotate, //水印倾斜度数
//       watermark_parent_node: 'watermarkId', //水印插件挂载的父元素element,不输入则默认挂在body上
//     }))
//   }
//   componentDidUpdate() {
//     watermark.load({
//       watermark_txt: this.props.watermarkConfig.content, //水印的内容
//       watermark_x: 20, //水印起始位置x轴坐标
//       watermark_y: 20, //水印起始位置Y轴坐标
//       watermark_rows: 1, //水印行数
//       watermark_cols: 1, //水印列数
//       watermark_x_space: 100, //水印x轴间隔
//       watermark_y_space: 50, //水印y轴间隔
//       watermark_font: '微软雅黑', //水印字体
//       watermark_color: this.props.watermarkConfig.colorCode, //水印字体颜色
//       watermark_fontsize: this.props.watermarkConfig.fontSize + 'px', //水印字体大小
//       watermark_alpha: this.props.watermarkConfig.alpha / 100, //水印透明度，要求设置在大于等于0.005
//       watermark_width: this.props.watermarkConfig.width, //水印宽度
//       watermark_height: this.props.watermarkConfig.height, //水印长度
//       watermark_angle: this.props.watermarkConfig.rotate, //水印倾斜度数
//       watermark_parent_node: 'watermarkId', //水印插件挂载的父元素element,不输入则默认挂在body上
//     });
//   }
//   render() {
//     return <div id="watermarkId">{this.props.children}</div>;
//   }
// }
